<!--
* @description 隐患
* @author zywu
* @date 2020/12/14 15:26:45
!-->
<template>
  <div class="section section-base section-danger">
    <div class="font24 colorYellow">隐患</div>
    <div style="padding-top: 20px;">
      <div class="font20">全年共消灭隐患</div>
      <div class="flex-start" style="align-items: baseline;margin-top: 20px;">
        <div ref="countDom" id="page_7_times_dom" class="emptyDom font40"></div>
        <count-to class="font40" :startVal="0" :endVal="dataCount" :duration="3000"></count-to>
        <div>个</div>
      </div>
      <div class="font20 opacityColor" id="page_7_des">平均每{{reportData.hiddenDanger.avgTime}}小时处理一个隐患</div>
      <div class="page_9_words_title">隐患关键词</div>
      <div v-if="reportData.hiddenDanger.word" class="page_9_words">
        <div ref="chartDom" style="width:100%;height:200px"></div>
      </div>
    </div>
  </div>
</template>

<script>
require('echarts-wordcloud')
export default {
  components: {},
  props: {
    reportData: {
      type: Object,
      default: function () {
        return {
          joinTime: {},
        }
      },
    },
    active: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      dataCount: 0,
    }
  },
  watch: {
    active(val) {
      if (val) {
        this.$nextTick(() => {
          this.dataCount = this.reportData.hiddenDanger.total || 0
          this.init()
        })
      }
    },
  },
  methods: {
    init() {
      if (this.reportData.hiddenDanger.word) {
        let wordsData = this.reportData.hiddenDanger.word.split(',')
        this.wordsDataConcat = wordsData.map((item) => {
          return { name: item, value: this.getRandomNumberByRange(1, 10) }
        })
        this.getWorld()
      }
    },
    getWorld() {
      let myChart2 = echarts.init(this.$refs.chartDom)
      let colorArr = [
        '#ffffff',
        '#fff8f8',
        '#fef1f1',
        '#feeae9',
        '#fee3e2',
        '#fddbdb',
        '#fdd4d4',
        '#fccdcc',
        '#fcc6c5',
        '#fcbfbe',
        '#fbb8b7',
        '#fbb1af',
        '#fbaaa8',
        '#faa2a1',
        '#fa9b9a',
        '#fa9492',
        '#f98d8b',
        '#f98684',
        '#f97f7d',
        '#f87875',
      ]
      let option = {
        tooltip: {
          show: false,
          //formatter: function(params) {
          //     let html = `<p><span style="display:inline-block;width:5px;
          //         height:5px;border-radius:50%;background-color:${params.color};margin-right:5px;vertical-align:middle"></span>${params.name}:共出现${params.value}次</p>`;
          //     return html;
          //   }
        },
        series: [
          {
            type: 'wordCloud',
            gridSize: 2,
            sizeRange: [12, 50],
            rotationRange: [-90, 90],
            shape: 'pentagon',
            textStyle: {
              normal: {
                color: function () {
                  return colorArr[Math.floor(Math.random() * colorArr.length)]
                },
              },
              emphasis: {
                shadowBlur: 10,
                shadowColor: '#333',
              },
            },
            data: this.wordsDataConcat,
          },
        ],
      }
      myChart2.setOption(option)
    },
    getRandomNumberByRange(start, end) {
      return Math.floor(Math.random() * (end - start) + start)
    },
  },
  mounted() {},
}
</script>